<!-- pages/login/components/mobile.vue -->
<script setup></script>

<template>
	<uni-forms v-model="formData" class="login-form" :rules="FormRules" ref="formRef">
		<uni-forms-item name="mobile">
			<uni-easyinput v-model="formData.mobile" :input-border="false" :clearable="false" placeholder="请输入手机号" placeholder-style="color: #C3C3C5" />
		</uni-forms-item>
		<uni-forms-item name="code">
			<uni-easyinput :input-border="false" v-model="formData.code" :clearable="false" placeholder="请输入验证码" placeholder-style="color: #C3C3C5" />
			<text class="text-button" v-if="isTimeOutShow" @click="timeoutClick">{{ isMessage }}</text>
			<view class="text-button" v-else>
				<!-- <uni-countdown :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown> -->
				<luo-countdown @timeup="timeupClick" color="#16C2A3" :show-day="false" :showHour="false" :showMinute="false" :second="5"></luo-countdown>
				秒重新获取
			</view>
		</uni-forms-item>

		<view class="agreement">
			<radio @click="changeIsAgreeClick" :checked="isAgree" color="#16C2A3" />
			我已同意
			<text class="link">用户协议</text>
			及
			<text class="link">隐私协议</text>
		</view>

		<button class="uni-button" @click="onFormSubmit">登 录</button>
	</uni-forms>
</template>

//
<script>
// export default {
// 	options: {
// 		styleIsolation: 'shared'
// 	}
// };
//
</script>

<script setup>
import { ref } from 'vue';

import useLoginStore from '@/store/login.js';

const loginStore = useLoginStore();
const isMessage = ref('发送验证码');

const isTimeOutShow = ref(true);

const formRef = ref();

// 是否同意协议
const isAgree = ref(false);

const formData = ref({
	mobile: '13212345678',
	code: ''
});

// 发送验证码
const timeoutClick = async () => {
	try {
		await formRef.value.validateField(['mobile']);

		const res = await loginStore.verifyCodeApiAction({
			mobile: formData.value.mobile,
			type: 'login'
		});
		if (res.code !== 10000) return uni.utils.toast(res.message);
		isTimeOutShow.value = false;
	} catch (e) {
		//TODO handle the exception
	}
};

const timeupClick = () => {
	isTimeOutShow.value = true;
	isMessage.value = '再次发送';
};

const FormRules = {
	mobile: {
		rules: [
			{
				required: true,
				errorMessage: '请填写手机号码'
			},
			{
				pattern: '^1\\d{10}$',
				errorMessage: '手机号码格式错误!'
			}
		]
	},
	code: {
		rules: [
			{
				required: true,
				errorMessage: '请输入验证码'
			},
			{
				pattern: '^\\d{6}$',
				errorMessage: '验证码格式错误!'
			}
		]
	}
};

const onFormSubmit = async () => {
	if (!isAgree.value) return uni.utils.toast('请勾选协议!');
	try {
		const result = await formRef.value.validate();
		const res = await loginStore.loginByMobileApiAction(result);
		if (res.code !== 10000) return uni.utils.toast(res.message);
	} catch (e) {
		//TODO handle the exception
		console.log(e);
	}
};

const changeIsAgreeClick = () => {
	isAgree.value = !isAgree.value;
};
</script>

<style lang="scss">
// pages/login/components/styles.scss
.uni-forms-item {
	height: 80rpx;
	margin-bottom: 30rpx !important;
	border-bottom: 1rpx solid #ededed;
	box-sizing: border-box;
	position: relative;
}

.agreement {
	font-size: 26rpx;
	color: #3c3e42;
	display: flex;
	align-items: center;
	margin-top: 50rpx;
	margin-left: -10rpx;

	.link {
		color: #16c2a3;
	}

	:deep(.uni-radio-wrapper) {
		transform: scale(0.6);
	}

	/* #ifdef MP */
	radio {
		transform: scale(0.6);
	}
	/* #endif */

	:deep(.uni-radio-input) {
		margin-right: 0 !important;
	}
}

:deep(.uniui-eye-filled),
:deep(.uniui-eye-slash-filled) {
	color: #6f6f6f !important;
}

:deep(.uni-forms-item__content) {
	display: flex;
	align-items: center;
}

:deep(.uni-forms-item__error) {
	width: 100%;
	padding-top: 10rpx;
	padding-left: 10rpx;
	border-top: 2rpx solid #eb5757;
	color: #eb5757;
	font-size: 24rpx;
	transition: none;
}

.text-button {
	display: flex;
	justify-content: flex-end;
	width: 240rpx;
	padding-left: 10rpx;
	font-size: 28rpx;
	color: #16c2a3;
	border-left: 2rpx solid #eee;
}

.uni-button {
	margin-top: 50rpx;
	border-radius: 60rpx;
	background-color: #20c5b2;
	color: #fff;
	&[disabled] {
		background-color: #fafafa;
		color: #d9dbde;
	}
}

.uni-navigator {
	margin-top: 30rpx;
	text-align: center;
	color: #848484;
	font-size: 28rpx;
}
</style>
